<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/webjars/layui/2.9.7/dist/css/layui.css">
    <script src="/webjars/vue/2.6.14/dist/vue.js"></script>
    <script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
    <script src="/webjars/axios/1.6.2/dist/axios.js"></script>
</head>
<style>
    .box-card {
        margin-top: 10vh;
        width: 440px;
        height: 70vh;
        border: 0px;
        background-color: #ffffff40;
    }
    body{
        background-image: url("/imgs/66.jpg");
        background-repeat: no-repeat;
        background-size: 100% 99vh;
    }
</style>
<div id="app">
    <el-row type="flex" justify="end" style="margin-right: 20vh;">
        <el-card :span="12" :offset="6" shadow="hover" class="box-card" style="border-radius: 12px">
            <el-header>
                <el-row type="flex" justify="center" style="margin-top: 5vh">
                    <el-col :span="4">
                        <h2>登录</h2>
                    </el-col>
                </el-row>
            </el-header>
            <form action="/doLogin" method="post" class="layui-form" style="margin-top: 5vh">
                <div class="demo-login-container">
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input style="background-color: #ffffff70" type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                        <span style="color: red;font-size: 12px" th:text="${session?.SPRING_SECURITY_LAST_EXCEPTION?.message}"></span>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input style="background-color: #ffffff70" type="password" name="pwd" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                        <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid layui-bg-blue" lay-submit lay-filter="demo-login">登录</button>
                    </div>
                </div>
            </form>
        </el-card>
    </el-row>
</div>
<script>
    new Vue({
        el: "#app"
    })
</script>
</body>
</html>